<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="nav">
			<view class="nav-content">
				<view class="nav-left">
					<view class="avatar-box">
						<image :src="mainStore().userInfo.avatar?mainStore().userInfo.avatar:avatar"
							mode="aspectFill" class="avatar-image" />
					</view>
					<text
						class="nav-title">{{mainStore().userInfo.nickName?mainStore().userInfo.nickName:'城市环境守护者'}}</text>
				</view>

			</view>
		</view>
		<!-- 主要内容区域 -->
		<scroll-view class="main-content" scroll-y>
			<!-- 数据统计 -->
			<view class="stats-section">
				<view class="stats-grid">
					<view class="stats-item" @click="toRecord">
						<text class="stats-num">{{summaryTotal.handleCount}}</text>
						<text class="stats-label">已清理数量</text>
					</view>
					<view class="stats-item stats-border">
						<text class="stats-num">¥ 1,256</text>
						<text class="stats-label">累计收入</text>
					</view>
					<view class="stats-item">
						<text class="stats-num">129</text>
						<text class="stats-label">结算记录</text>
					</view>
				</view>
			</view>
			<!-- 任务列表 -->
			<view class="task-section">
				<text class="section-title">今日任务</text>
				<view class="task-list">
					<view class="task-item" v-for="(item,index) in taskArr" :key="index">
						<view class="task-info">
							<view class="task-icon-box">
								<image :src="item.src" mode="aspectFill" class="task-icon" />
							</view>
							<view class="task-detail">
								<text class="task-name">{{item.name}}</text>
								<text class="task-reward">{{item.reward}}</text>
							</view>
						</view>
						<view>
							<button class="task-button" @tap="handleUpload">去完成</button>
						</view>
					</view>
				</view>
			</view>
			<view class="upload-btn" @tap="handleUpload">
				<uni-icons type="camera-filled" size="24" color="#FFFFFF" />
			</view>
		</scroll-view>
		<!-- 底部按钮 -->
		<!-- <view class="footer" v-if="mainStore().token">
			<button class="primary-btn" type="primary" @click="loginOut">退出</button>
		</view> -->
	</view>
	<signview ref="getUserInfoRef" @success="getUserInfoSuc"></signview>
</template>
<script lang="ts" setup> 
	import {resourcesPath} from '@/config/common.js'
	import { request } from '../../utils/api';
	import {
		mainStore
	} from '@/store/index.js';
	import { onMounted, ref } from 'vue';
	import {validateIsLogin} from '@/hooks/validateIsLogin.js'
	
	const getUserInfoRef = ref(null)
	const {validateLogin} =  validateIsLogin(getUserInfoRef)
	const avatar = resourcesPath + '/image/avatar.jpg';
	const taskArr = [
		{
			name: '清理小广告',
			reward: '奖励 2-5分/张',
			src: resourcesPath + '/image/task1.jpg'
		},
		// {
		// 	name: '清理墙面涂鸦',
		// 	reward: '奖励 5 元/处',
		// 	src: '/image/task2.jpg'
		// }
	]
	
	const openSQ = () => {
		
	}
	const toRecord = () => {
		if (!validateLogin()) {
			return
		}
		uni.navigateTo({
			url: '/pages/record/record'
		})
	}
	const handleUpload = () => {
		// if (!mainStore().token) {
		// 	openSQ()
		// 	return
		// }
		if (!validateLogin()) {
			return
		}
		uni.navigateTo({
			url: '/pages/upload/upload'
		})
	}
	const loginOut = () => {
		mainStore().loginOut()
	}
	//微信登录成功
	const getUserInfoSuc = () => {
		getTotal()
	}

	const summaryTotal = ref({
		handleCount: 0,
	})
	const getTotal = () => {
		///admin/v1/summary:total
		if (!mainStore().token) {
			return
		}
		// mainStore().getUserInfo()
		// request({
		// 	url: '/sanitation/v1/me',
		// 	method: 'GET',
		// }).then(res => {
		// 	summaryTotal.value = res || {}
			
		// })
	}

	onMounted(async () => {
		if (mainStore().token) {
			await mainStore().getUserInfo()
		}
	})
</script>
<style>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.nav {
		padding: 30rpx;
		background-color: #f0f8ff;
		border-bottom: 1px solid #e6e6e6;
		position: relative;
		z-index: 1;
		flex-shrink: 0;
	}

	.nav-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
	}

	.nav-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}

	.avatar-box {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
		border: 4rpx solid #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.avatar-image {
		width: 100%;
		height: 100%;
	}

	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}




	.main-content {
		flex: 1;
		overflow: hidden;
	}

	.stats-section {
		background-color: #ffffff;
		padding: 40rpx 30rpx;
	}

	.stats-grid {
		display: flex;
		justify-content: space-between;
	}

	.stats-item {
		flex: 1;
		text-align: center;
	}

	.stats-border {
		border-left: 1px solid #f0f0f0;
		border-right: 1px solid #f0f0f0;
	}

	.stats-num {
		display: block;
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.stats-label {
		font-size: 14px;
		color: #999999;
	}

	.task-section {
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.section-title {
		display: block;
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.task-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.task-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.task-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.task-icon-box {
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.task-icon {
		width: 100%;
		height: 100%;
	}

	.task-detail {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.task-name {
		font-size: 16px;
		color: #333333;
	}

	.task-reward {
		font-size: 14px;
		color: #999999;
	}

	.task-button {
		background-color: #2979ff;
		color: #ffffff;
		font-size: 14px;
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
	}

	.tab-bar {
		height: 100rpx;
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		display: flex;
		flex-shrink: 0;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6rpx;
	}

	.tab-text {
		font-size: 12px;
		color: #666666;
	}

	.tab-text-active {
		color: #2979ff;
	}

	.upload-btn {
		position: fixed;
		right: 32rpx;
		bottom: 160rpx;
		width: 112rpx;
		height: 112rpx;
		border-radius: 56rpx;
		background-color: #2979ff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 8px rgba(41, 121, 255, 0.2);
	}

	.footer {
		padding: 30rpx;
		/* background: #ffffff; */
		flex-shrink: 0;
	}

	.primary-btn {
		background: #07c160;
		color: #ffffff;
		font-size: 16px;
		border-radius: 44rpx;
	}
</style>